<script setup>
// import CategorySelect from './components/CategorySelect.vue'
import VegeFruEdit from './components/VegeFruEdit.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { vegeFruGetListService, vegeFruDelService, GetCategoryService } from '@/api/vegeFru'
// import { formatTime } from '@/utils/format'
const vegeFruList = ref([])
const vegeFruEditRef = ref()
const params = ref({
  pageNo: 1,
  pageSize: 5,
  mt: '',
  st: '',
  keyword: ''
})
const loading = ref(false)
const total = ref(0)
const getvegeFruList = async () => {
  loading.value = true
  const res = await vegeFruGetListService(params.value)
  total.value = res.data.total
  vegeFruList.value = res.data.data
  loading.value = false
}
getvegeFruList()
const onSizeChange = (size) => {
  params.value.pageNo = 1
  params.value.pageSize = size
  getvegeFruList()
}
const onCurrentChange = (page) => {
  params.value.pageNo = page
  getvegeFruList()
}

const onSearch = () => {
  params.value.pageNo = 1
  getvegeFruList()
}
const onReset = () => {
  params.value.pageNo = 1
  params.value.mt = ''
  params.value.st = ''
  params.value.keyword = ''
  getvegeFruList()
}
const categoryList = ref()
const getCategorylList = async () => {
  loading.value = true
  const res = await GetCategoryService(params.value.mt)
  loading.value = false

  const map = new Map()
  //去重
  let distinctList = res.data.filter((item) => !map.has(item.st) && map.set(item.st, 1))
  categoryList.value = distinctList
}
getCategorylList()

// 编辑新增逻辑
const onAddvegeFru = () => {
  vegeFruEditRef.value.open({})
}
const onEditvegeFru = (row) => {
  vegeFruEditRef.value.open(row)
}
const onSuccess = (type) => {
  if (type === 'add') {
    const lastPage = Math.ceil((total.value + 1) / params.value.pageSize)
    params.value.pageNo = lastPage
  }
  getvegeFruList()
}
const onDeletevegeFru = async (row) => {
  await ElMessageBox.confirm('你确认删除该果蔬吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await vegeFruDelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getvegeFruList()
}
//监听大分类 改变即改变小分类
watch(
  () => params.value.mt,
  async (newValue) => {
    const res = await GetCategoryService(newValue) // 重新查询小分类
    categoryList.value = res.data
    params.value.st = ''
  }
)
</script>

<template>
  <page-container title="果蔬详情管理">
    <template #extra>
      <el-button type="primary" @click="onAddvegeFru">新增果蔬</el-button>
    </template>
    <el-form inline>
      <el-form-item label="果蔬分类:">
        <el-select v-model="params.mt">
          <el-option label="水果" value="水果"></el-option>
          <el-option label="蔬菜" value="蔬菜"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品种:">
        <el-select v-model="params.st">
          <el-option
            v-for="item in categoryList"
            :key="item.st"
            :label="item.st"
            :value="item.st"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入关键词" v-model="params.keyword"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="vegeFruList" style="width: 100%" v-loading="loading">
      <el-table-column label="果蔬名称" width="400">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="别名" prop="alias"></el-table-column>
      <el-table-column label="分类" prop="mt"></el-table-column>
      <el-table-column label="品种" prop="st"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditvegeFru(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDeletevegeFru(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="params.pageNo"
      v-model:page-size="params.pageSize"
      :page-size="[2, 3, 5, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    >
    </el-pagination>
    <vege-fru-edit ref="vegeFruEditRef" @success="onSuccess"></vege-fru-edit>
  </page-container>
</template>
